<template>
	<view>
		<nav-bar bgc="linear-gradient(to right, #fd6431, #ff9972)" v-show="navBarShow">聚惠时光</nav-bar>
		<view class="section-1">
			<view class="content">
				<view class="search" @click="goToSearch"><image src="../../static/image/index/SS@3x.png" mode=""></image></view>
				<view class="address" @click="oncity">
					<image class="image" src="../../static/image/index/DW@3x.png" mode=""></image>
					<text class="text">{{ region }}</text>
					<!-- 地址组件 -->
					<popup-layer ref="popupRef" :direction="'right'" @back_city="back_citys">
						<view style="width:750upx;height: 100%;"><citySelect @back_city="back_city" :position="position" @back_citys="back_citys"></citySelect></view>
					</popup-layer>
					<image class="icon" src="../../static/image/index/JR@3x.png" mode=""></image>
				</view>
			</view>
			<!-- 轮播图 -->
			<view class="swiper">
				<swiper
					class="card-swiper"
					:class="dotStyle ? 'square-dot' : 'round-dot'"
					:indicator-dots="false"
					:circular="true"
					:autoplay="true"
					interval="5000"
					duration="500"
					@change="cardSwiper"
					indicator-color="#8799a3"
					indicator-active-color="#0081ff"
				>
					<swiper-item v-for="(item, index) in swiperList" :key="index" :class="cardCur == index ? 'cur' : ''">
						<view class="swiper-item"><image :src="item.img_url" mode=""></image></view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!-- 分类 -->
		<view class="section-2">
			<view class="item" v-for="(item, index) in classify" :key="index">
				<view class="img"><image :src="item.img_url"></image></view>
				<view class="text">{{ item.title }}</view>
			</view>
		</view>
		<!-- 品质专区 -->
		<view class="section-3" v-if="this.activity">
			<view class="title">
				<view>————</view>
				<view @click="clear_token()">品质专区</view>
				<view>————</view>
			</view>
			<view class="content">
				<view class="contentTop">
					<view class="contentTopItem" v-for="(item, indexs) in activity" v-if="indexs < 2"><image :src="item.img_url"></image></view>
				</view>
				<view class="contentBottom" v-if="this.activity.length > 2">
					<view class="contentBottomItem" v-for="(item, index) in activity" v-if="index >= 2"><image :src="item.img_url"></image></view>
				</view>
			</view>
		</view>
		<!-- 分割条组件 -->
		<separator></separator>
		<!-- 列表 -->
		<view class="section-4">
			<!-- 抬头 -->
			<view class="title">
				<view class="text">爆款推荐</view>
				<view class="checkMore">查看更多></view>
			</view>
			<!-- 筛选栏组件 -->
			<view @click="changeTop"><screen></screen></view>
			<!-- 死数据 -->
			<!-- <view class="list" @click="screenShow">
				<view class="item">
					<text class="text">全部类型</text>
					<image src="../../static/image/index/XLXZ@3x.png" mode=""></image>
				</view>
				<view class="item">
					<text>附近</text>
					<image src="../../static/image/index/XLWXZ@3x.png" mode=""></image>
				</view>
				<view class="item">
					<text>全部类型</text>
					<image src="../../static/image/index/XLWXZ@3x.png" mode=""></image>
				</view>
				<view class="item">
					<text>全部类型</text>
					<image src="../../static/image/index/XLWXZ@3x.png" mode=""></image>
				</view>
			</view> -->
			<!-- 列表内容 -->
			<recommend v-for="(item, index) in baokuanList" :key="index" :param="item" @shopDetail="shopDetail" @bayNow="bayNow" @share="share"></recommend>
		</view>
		<!-- 底部 -->
		<wyg-bottom-tab-withcenter tabIndex="1" :tabListParent="tabList"></wyg-bottom-tab-withcenter>
	</view>
</template>

<script>
import recommend from '@/components/recommend.vue'; //商品列表组件
import citySelect from '@/components/citySelect/city-select.vue'; //地址组件
import popupLayer from '@/components/citySelect/popup-layer.vue'; //地址组件
import wygBottomTabWithcenter from '@/components/wyg-bottom-tab/wyg-bottom-tab-withcenter.vue'; //底部组件
import TAB_LIST from '../../static/wyg-bottom-tab/js/botoom-list2.js'; //底部组件js
import screen from '../../components/screen.vue'; //筛选组件
export default {
	components: {
		recommend,
		citySelect,
		popupLayer,
		wygBottomTabWithcenter,
		screen
	},
	data() {
		return {
			cardCur: 0, //轮播
			swiperList: [
				// {
				// 	id: 0,
				// 	type: 'image',
				// 	url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'
				// }
			],
			dotStyle: false, //轮播
			towerStart: 0, //轮播
			direction: '', //轮播
			region: '成都市龙泉驿区', //地址显示
			position: '未知', //地址显示
			navBarShow: true, //显示隐藏导航栏
			tabList: TAB_LIST, //底部栏数据
			classify: '', //分类选项
			activity: '', //活动数据
			baokuanList: [1, 2, 3],
			dataPost: {
				store_area: '龙泉驿区',
				lat: '',
				lng: '',
				first_cate: 0,
				second_cate: 0,
				distance: 0,
				price: 0,
				volume: 0,
				title: 0
			},
			Lmap: '',
			Larea: ''
		};
	},
	onLoad(str) {
		this.TowerSwiper('swiperList'); //轮播
		// this.$refs.popupRef.close();//地址选择
		let code = str.code;
		// 判断微信登陆
		//let code = '061zEobP1R36p71gpd9P1mfwbP1zEobu'; //假CODE
		//uni.setStorageSync('token', 123456789); //假TOKEN
		if (!getApp().globalData.token && !code) {
			window.location.href =
				'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx6d789b2bd9be4b4e&redirect_uri=https://hw.juyunka.com&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect';
		}
		if (code && !getApp().globalData.token) {
			var dataPost = {
				code: code,
				pid: 0
			};
			this.ajaxJson('code2Session', dataPost, ret => {
				uni.setStorageSync('token', ret.token);
				uni.setStorageSync('uid', ret.id);
				uni.setStorageSync('type', ret.type);
				getApp().globalData.token = ret.token;
				//请求bananer
				this.getBanner();
				this.bkLis();
			});
		}
		if (getApp().globalData.token) {
			//请求bananer
			this.getBanner();
			this.bkLis();
		}
	},
	methods: {
		//进入详情
		shopDetail: function(item) {
			// console.log(item);
			// return false;
			this.ajaxJson('selStock', { goods_id: item.id }, res => {
				console.log(res);
				if (res > 0) {
					uni.navigateTo({
						url: '../shopDetails/shopDetails?goods_id=' + item.id + '&bid=' + item.bid
					});
				} else {
					console.log(55);
					uni.showToast({
						title: '抱歉，该商品已售罄'
					});
					this.doSearch();
				}
			});
		},
		// 爆款推荐
		bkLis: function(Lmap, Larea) {
			// if(this.Lmap){
			// 	this.dataPost.lat=this.Lmap[1];
			// 	this.dataPost.lng=this.Lmap[0];
			// }
			// console.log(this.Lmap);
			this.dataPost.store_area = this.Larea ? this.Larea : '龙泉驿区';
			console.log(this.dataPost);
			this.ajaxJson('hots', this.dataPost, ret => {
				this.baokuanList = ret;
			});
		},
		// 请求banner
		getBanner: function() {
			this.ajaxJson('index', {}, ret => {
				this.swiperList = ret.banner;
				this.classify = ret.classify;
				this.activity = ret.activity;
			});
		},
		// 清除缓存
		clear_token: function() {
			console.log(uni.getStorageSync('token'));
			uni.clearStorageSync();
		},
		//轮播
		DotStyle(e) {
			this.dotStyle = e.detail.value;
		},
		// cardSwiper
		cardSwiper(e) {
			this.cardCur = e.detail.current;
		},
		// towerSwiper
		// 初始化towerSwiper
		TowerSwiper(name) {
			let list = this[name];
			for (let i = 0; i < list.length; i++) {
				list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2));
				list[i].mLeft = i - parseInt(list.length / 2);
			}
			this.swiperList = list;
		},

		// towerSwiper触摸开始
		TowerStart(e) {
			this.towerStart = e.touches[0].pageX;
		},

		// towerSwiper计算方向
		TowerMove(e) {
			this.direction = e.touches[0].pageX - this.towerStart > 0 ? 'right' : 'left';
		},

		// towerSwiper计算滚动
		TowerEnd(e) {
			let direction = this.direction;
			let list = this.swiperList;
			if (direction == 'right') {
				let mLeft = list[0].mLeft;
				let zIndex = list[0].zIndex;
				for (let i = 1; i < this.swiperList.length; i++) {
					this.swiperList[i - 1].mLeft = this.swiperList[i].mLeft;
					this.swiperList[i - 1].zIndex = this.swiperList[i].zIndex;
				}
				this.swiperList[list.length - 1].mLeft = mLeft;
				this.swiperList[list.length - 1].zIndex = zIndex;
			} else {
				let mLeft = list[list.length - 1].mLeft;
				let zIndex = list[list.length - 1].zIndex;
				for (let i = this.swiperList.length - 1; i > 0; i--) {
					this.swiperList[i].mLeft = this.swiperList[i - 1].mLeft;
					this.swiperList[i].zIndex = this.swiperList[i - 1].zIndex;
				}
				this.swiperList[0].mLeft = mLeft;
				this.swiperList[0].zIndex = zIndex;
			}
			this.direction = '';
			this.swiperList = this.swiperList;
		},
		// 选择地址
		oncity() {
			var that = this;
			this.$refs.popupRef.show();
			this.navBarShow = false;
		},
		back_city(e) {
			if (!uni.getStorageSync('getLngLat')) {
				let Lmap = '';
				let Larea = '';
				this.ajaxJson('getLngLat', { city: e.area }, function(ret) {
					uni.setStorageSync('map', [ret.result.location.lng, ret.result.location.lat]);
					uni.setStorageSync('area', e.area);
				});
			}

			this.navBarShow = true;
			if (e !== 'no') {
				this.region = e.cityName + e.area ? e.cityName + e.area : '未知';
				this.$refs.popupRef.close();
			} else {
				this.$refs.popupRef.close();
			}
		},
		back_citys(e) {
			this.navBarShow = true;
			if (e !== 'no') {
				uni.setStorageSync('area', e.area);
				this.region = e.cityName + e.area ? e.cityName + e.area : '未知';
				this.position = e.cityName + e.area ? e.cityName + e.area : '未知';
				this.Larea = e.area;
				this.bkLis();
				this.$refs.popupRef.close();
			} else {
				this.$refs.popupRef.close();
			}
		},
		share(e) {
			console.log(e);
		},
		//跳转搜索页
		goToSearch: function() {
			uni.navigateTo({
				url: '../search/search'
			});
		},
		//点击筛选隐藏导航栏
		setNavBar: function() {
			this.screen = false;
			console.log(44);
		},
		changeTop:function(){
			
		}
	}
};
</script>

<style lang="scss" scoped>
@import '../../colorui/main.css';
* {
	padding: 0;
	margin: 0;
	font-size: 0.75rem;
	box-sizing: border-box;
}
page {
	background: #ffffff;
	margin-bottom: 160rpx;
}
.section-1 {
	width: 100%;
	height: 600rpx;
	padding-top: 100rpx;
	background: linear-gradient(to right, #fd6431, #ff9972);
	.content {
		display: flex;
		width: 100%;
		// border: 1px red solid;
		padding: 30rpx;
		background: linear-gradient(to right, #fd6431, #ff9972);
		z-index: 888 !important;
		position: fixed;
		top: 80rpx;
		justify-content: space-between;
		.search {
			width: 40rpx;
			height: 40rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.address {
			// border: 1px red solid;
			width: 400rpx;
			height: 40rpx;
			color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			.image {
				width: 40rpx;
				height: 40rpx;
			}
			.image,
			.text,
			.icon {
				// border: 1px red  solid;
				margin: 0 10rpx;
			}
			.icon {
				width: 20rpx;
				height: 30rpx;
			}
		}
	}
	.swiper {
		margin-top: 40rpx;
	}
}
.section-2 {
	width: 90%;
	margin: -80rpx auto 0;
	padding: 30rpx 20rpx;
	background-color: #ffffff;
	// border: 1px #fd6532 solid;
	box-shadow: 0 0 5rpx 2rpx #fd6532;
	border-radius: 30rpx;
	display: flex;
	flex-wrap: wrap;
	.item {
		padding: 20rpx;
		width: 20%;
		display: flex;
		flex-direction: column;
		align-items: center;
		.img {
			width: 100%;
			height: 80rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
}
.section-3 {
	width: 90%;
	// border: 1px red solid;
	border-radius: 20rpx;
	margin: 30rpx auto 0;
	.title {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 10rpx 0;
		view:nth-child(2) {
			// border: 1px red solid;
			padding: 0 10rpx;
			font-size: 40rpx;
			font-weight: bold;
		}
	}
	.content {
		width: 100%;
		// height: 1000rpx;
		margin-top: 40rpx;
		display: flex;
		flex-direction: column;
		.contentTop {
			display: flex;
			justify-content: space-between;
			.contentTopItem {
				width: 48%;
				height: 250rpx;
				border-radius: 20rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;
				overflow: hidden;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
		.contentBottom {
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin: 20rpx 0;
			.contentBottomItem {
				width: 30%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-around;
				height: 250rpx;
				border-radius: 20rpx;
				overflow: hidden;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
}
.section-4 {
	.title {
		display: flex;
		justify-content: space-between;
		padding: 10rpx 30rpx;
		.text {
			font-weight: bold;
			font-size: 32rpx;
		}
		.checkMore {
			color: #aaaaaa;
		}
	}
	.list {
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		image {
			width: 20rpx;
			height: 20rpx;
		}
		text {
			margin: 0 7rpx;
		}
		.text {
			color: #fd6431;
		}
	}
}
</style>
